<template>
	<div>
		<h1>useCount</h1>
		<div>count is :{{ current }}</div>
		<el-button type="primary" @click="inc(2)">增加</el-button>
		<el-button type="danger" @click="dec(4)">减少</el-button>
		<el-button type="info" @click="set(16)">设置为16，但是最大限制了15</el-button>
		<el-button type="warning" @click="reset">reset</el-button>

		<h1>useMouse</h1>
		X:{{ x }} y:{{ y }}

		<h1>useTime</h1>
		time:{{ time }}

		<h1>useURLLoader</h1>
		<h1 v-if="loading">Loading!...</h1>
		<img v-if="!loading" :src="result?.[0].url" width="400" />
	</div>
</template>

<script setup lang="ts">
import useCount from '../../hooks/useCount'
import useMouse from '../../hooks/useMouse'
import useTime from '../../hooks/useTime'
import useURLLoader from '../../hooks/useURLLoader'

interface CatResult {
	id: string
	url: string
	width: number
	height: number
}
// 也可以直接在return里面结构，但是不推荐，不好追溯定义源头
const { current, inc, dec, set, reset } = useCount(2, { min: 1, max: 15 })
const { x, y } = useMouse()
const { time } = useTime()
const { result, loading } = useURLLoader<CatResult[]>(
	'https://api.thecatapi.com/v1/images/search?limit=1'
)
</script>

<style scoped></style>
